<template>
	<view class="box">
		<view class="nanti" v-for="(i,k) in list" :key='k'>
			<view class="num">
				难题{{k+1}}
			</view>
			<view class="zhuti">
				<view class="name">
					{{i.tatal}}
				</view>
				<view class="jieda">
					<view class="jdbox">
						{{i.jieda}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[
					{
						tatal:'关于布局问题，设计稿给的比较大，为了高度还原设计稿的尺寸，布局应该如何做处理？',jieda:'设计图的尺寸为固定的，若是在不同分辨率下，所需布局结构没有太大差别，可以采用动态改变meta标签里面的默认缩小比例，思路为：获取到窗口的宽度，然后让他比上设计稿的宽度，将得到的值赋予content属性中的initial-scale=1，从而改变默认的缩放比例，这种做法的优点是不用重新对页面元素的尺寸做处理，比较的简单，缺点是可能会遇到兼容的问题，只缩小页面尺寸不合适时无法使用。第二种做法是使用响应式布局，根据不同的尺寸效果图进行不同的布局，这种做法的优点是页面还原度较高，能够适配各种结构以及尺寸，缺点是代码复杂，需要写的css样式量较大，同时页面结构越为复杂工作量越大，如果响应粗糙，定位会出现些许偏差，而且一般不会有各种尺寸的比例,需要自己适配.第三种方法,百分比布局,从最外层开始使用宽度百分比,内部元素也使用宽度百分比,这样无论在何种屏幕上显示都为整屏,优点是操作简单,思路不用改变,缺点是百分比布局高度为固定值,宽度不固定,在尺寸差别较大的环境下,元素比例差别较大,会出现元素拉伸或压缩的情况,同时无法精准测算百分比,多为前端肉眼估计,所以还原度较差.最好的解决方法应该是使用淘宝解决方案,进行rem布局,css内部rem的换算为设计图尺寸除以10,比如设计图尺寸750px,那么1rem就等于75px,然后引入js文件,动态计算html的底层font-size,从而达到页面动态适应.'
					},{
						tatal:'各种软件在win10上配置遇到的问题',jieda:'有各种软件例如node.js,vue脚手架，软件内置终端等，安装过程没有异常，但是某些功能无法使用，一般的都为管理员权限问题，win10虽然安全系数较高，但是也因为权限问题让人头大，所以说，当执行命令时尽量在以管理员权限运行的软件中执行，同时常用的软件都给他设置默认以管理员权限打开，这能解决大部分问题，但是仍有部分无法解决，例如hbuilder x的内置终端仍然显示无法加载PSReadline 模块，无从下手'
					},{
						tatal:'定位元素的层级问题',jieda:'定位元素层级较高，除去relative,因为绝对定位和相对浏览器定位都脱离了文本流，所以一般在最上面，所以父子元素之间需要定位，且父元素的层级需要高于子元素时，子元素应该使用相对定位，这样才可以给父元素使用层级'
					},{
						tatal:'实现给循环出来的列表添加事件来控制内部元素的展示效果',jieda:'jq中可以使用多级的dom选择器，主要是是要熟练的使用：parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)，children() 方法返回被选元素的所有直接子元素。find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。siblings() 方法返回被选元素的所有同胞元素。eq()指定元素的第几个元素。之间的组合使用。在vue中使用尤其是有多个同级父元素，或说是嵌套循环渲染，一般函数中要接受一个参数，调取函数时需要将index即循环出来的下标值传入，当循环层级越多时，传入的参数越多，多为各个层级的index值的使用'
					},
				]
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped>
	.box{
		width: 100%;
		background: #b1c9ef;
		overflow: hidden;
	}
	.nanti{
		width: 96%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-shadow: 0rpx 10rpx 10rpx #383838;
		background: white;
		padding-bottom: 20rpx;
	}
	.num{
		font-size: 34rpx;
		color: #DD524D;
		line-height: 80rpx;
		font-weight: 900;
		margin-left: 20rpx;
	}
	.zhuti{
		width: 96%;
		margin: 10rpx auto;
	}
	.zhuti>.name{
		font-size: 30rpx;
		color: #007AFF;
		line-height: 40rpx;
	}
	.zhuti>.jieda{
		margin: 10rpx auto;
		border: 1px solid #808080;
		border-radius: 20rpx;
		text-indent: 20rpx;
		font-size: 28rpx;
		color: #963380;
		background: #fffbdb;
	}
	.zhuti>.jieda>.jdbox{
		width: 98%;
		margin: 20rpx auto;
	}
</style>
